<template>
  <div class="rightView">
    <transition name="animationRL">
      <div v-show="shows" class="container">
        <div class="container_title1">
          <span>产业链全景图</span>
        </div>
        <el-scrollbar class="marginT16 xscroll-container" style="margin-left: 5%;width: 92%; white-space: nowrap;"
                      ref="scroll" @wheel.native.prevent="changeScroll">
        <span :class="index == clickPos ?'container_iTitle container_s':'container_iTitle container_n'"
              v-for="(item,index) in chainsData" :key="item"
              @click="chainmap(item,index)">{{ item }}</span>
        </el-scrollbar>
        <div style="position: relative">
          <div class="container_node">
            <div class="container_node_circle" style="background: #FF0548"></div>
            <span class="container_node_name">优势节点</span>
            <div class="container_node_circle" style="background:#FF8514 "></div>
            <span class="container_node_name">薄弱节点</span>
            <div class="container_node_circle" style="background:#A541FF "></div>
            <span class="container_node_name">缺失节点</span>
          </div>
        </div>
        <div class="container_upperreaches">
          <div class="type">上游</div>
          <div class="container_upperreaches_listContainer">
            <div class="container_upperreaches_listContainer_C userFlex">
              <div class="container_upperreaches_listContainer_C_item"
                   v-for="item in chainmapData.nodeList[0].subNodeList"
                   :key="item">
                <div class="circle" :style="item.strength == 1 ? 'background-color: #FF0548' :
            (item.strength == 2 ? 'background-color: #FF8514':(item.strength == 3 ? 'background-color: #FF8514':'background-color: #A541FF'))"></div>
                <span class="name">{{ item.node }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="container_middlereaches">
          <div class="type">中游</div>
          <div class="container_middlereaches_listContainer">
            <div class="container_middlereaches_listContainer_C userFlex">
              <div class="container_middlereaches_listContainer_C_item"
                   v-for="item in chainmapData.nodeList[1].subNodeList"
                   :key="item">
                <div class="circle" :style="item.strength == 1 ? 'background-color: #FF0548' :
            (item.strength == 2 ? 'background-color: #FF8514':(item.strength == 3 ? 'background-color: #FF8514':'background-color: #A541FF'))"></div>
                <span class="name">{{ item.node }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="container_downstream">
          <div class="type">下游</div>
          <div class="container_downstream_listContainer">
            <div class="container_downstream_listContainer_item" v-for="item in chainmapData.nodeList[2].subNodeList"
                 :key="item">
              <div class="circle" :style="item.strength == 1 ? 'background-color: #FF0548' :
            (item.strength == 2 ? 'background-color: #FF8514':(item.strength == 3 ? 'background-color: #FF8514':'background-color: #A541FF'))"></div>
              <span class="name">{{ item.node }}</span>
            </div>
          </div>
        </div>
        <div class="line"></div>

        <div style="display: flex;flex-direction: row">
          <div class="container_analysis">
            <div class="titleContainer">
              <div class="react"></div>
              <span class="title">产业链简析</span>
            </div>
            <div class="analysisDetails">
              <div class="analysisDetails_React" style="background-color: #00FCFF"></div>
              <span class="analysisDetails_name">产业链完整度</span>
              <span class="analysisDetails_des">{{ chainmapData.intro.integrity }}</span>
            </div>
            <div class="analysisDetails" style="margin-top: 0px">
              <div class="analysisDetails_React" style="background-color: #00FCFF"></div>
              <span class="analysisDetails_name">优势产业</span>
              <span class="analysisDetails_des">{{ chainmapData.intro.advantageNodes }}</span>
            </div>
            <div class="analysisDetails" style="margin-top: 0px">
              <div class="analysisDetails_React" style="background-color: #00FCFF"></div>
              <span class="analysisDetails_name">弱势产业</span>
              <span class="analysisDetails_des">{{ chainmapData.intro.weaknessNodes }}</span>
            </div>
            <div class="analysisDetails" style="margin-top: 0px">
              <div class="analysisDetails_React" style="background-color: #00FCFF"></div>
              <span class="analysisDetails_name">缺失产业</span>
              <span class="analysisDetails_des">{{ chainmapData.intro.deficiencyNodes }}</span>
            </div>
          </div>
          <div class="container_analysis">
            <div class="titleContainer">
              <div class="react"></div>
              <span class="title">产业链简析</span>
            </div>
            <div style="display: flex;flex-direction: row">
              <div class="scale">
                <div class="icon" :style="{'background-image':`url(${require('@/assets/icon_cg1.png')})`}"></div>
                <span class="name">{{ chainmapData.companyScale.count }}</span>
                <span class="type">覆盖企业总数</span>
              </div>
              <div class="scale">
                <div class="icon" :style="{'background-image':`url(${require('@/assets/icon_cg2.png')})`}"></div>
                <span class="name">{{ chainmapData.companyScale.marketValue }}</span>
                <span class="type">总市值</span>
              </div>
            </div>
          </div>

        </div>
      </div>
    </transition>
    <div class="shrink" @click="shows=!shows"></div>
  </div>
</template>

<script>

import {chainmap, chains} from "@/api/axios"

export default {
  name: "floatRight",
  props: {
    parkName: String
  },
  data() {
    return {
      clickPos: 0,
      chainsData: '',//产业链数据
      chainmapData: '',//产业详情
      shows: true
    }
  },
  mounted() {
    this.chains()
  },
  beforeDestroy() {
  },
  methods: {
    changeScroll(e) {
      let wrap = this.$refs.scroll.$refs.wrap
      wrap.scrollLeft = wrap.scrollLeft - e.wheelDelta
    },
    chains() {//
      let _this = this
      var params = {
        "parkName": this.parkName,
        // "chainName":this.chainName
      }
      chains(params).then((res) => {
        _this.chainsData = res
        if (_this.chainsData) {
          _this.chainmap(_this.chainsData[0], 0)
        }

        // _this.intentionprojectData = res.list
      })
    },
    chainmap(chainName, index) {//
      this.clickPos = index
      let _this = this
      var params = {
        "parkName": this.parkName,
        "chainName": chainName
      }
      chainmap(params).then((res) => {
        _this.chainmapData = res
      })
    },
  }
}
</script>

<style lang="scss">
@import "@/styles/scrollbar.scss";

.userFlex {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .userFlex {
  }

  .userFlex::-webkit-scrollbar {
  }
}
</style>
<style lang="scss" scoped>

.marginT16 {
  margin-top: 16px;
}

.rightView {
  float: right;
  margin-top: 20px;
  display: flex;
  height: 630px;
  flex-direction: row;
  align-items: center;
  position: relative;
  z-index: 3;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink_r.png");
  }

  .container {
    width: 555px;
    height: 593px;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_3_4.png");
    display: flex;
    flex-direction: column;

    &_title1 {
      width: 515px;
      height: 24px;
      margin-top: 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title3.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 11px;
        line-height: 24px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    &_iTitle {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      width: 127px;
      height: 30px;
      font-size: 11px;
      font-family: Source Han Sans SC;
      background-size: 100% 100%;
      font-weight: 400;
      line-height: 30px;
    }

    &_s {
      background-image: url("@/assets/bg_chain_ts.png");
      color: #FFFFFF;
    }

    &_n {
      background-image: url("@/assets/bg_chain_tn.png");
      color: #9DDCFC;
    }

    &_node {
      right: 26px;
      position: absolute;
      align-items: center;
      display: flex;
      flex-direction: row;

      &_circle {
        width: 4px;
        height: 4px;
        margin-left: 10px;
        border-radius: 50%;
      }

      &_name {
        margin-left: 3px;
        height: 24px;
        font-size: 6px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #CAF6FF;
        line-height: 24px;
      }
    }

    &_upperreaches {
      display: flex;
      margin-top: 24px;
      flex-direction: row;
      align-items: center;

      .type {
        width: 85px;
        height: 43px;
        text-align: center;
        margin-left: 20px;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_chain_s1.png");
        font-size: 14px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFFFF;
        line-height: 43px;
      }

      &_listContainer {
        width: 417px;
        display: flex;
        overflow-y: auto;
        flex-direction: row;
        flex-wrap: wrap;
        max-height: 47px;
        min-height: 47px;
        margin-left: 9px;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_chain_s2.png");

        &_C {
          margin-top: 4px;
          margin-left: 14px;
          width: 405px;
          display: flex;
          overflow-y: auto;
          flex-direction: row;
          flex-wrap: wrap;
          max-height: 40px;
          min-height: 40px;

          &_item {
            cursor: pointer;
            margin-left: 18px;
            height: 31px;
            background-size: 100% 100%;
            background-image: url("@/assets/bg_chain_s3.png");
            display: flex;
            flex-direction: row;
            align-items: center;

            .circle {
              margin-left: 12px;
              margin-right: 6px;
              width: 4px;
              height: 4px;
              background: #FF0548;
              border-radius: 50%;
            }

            .name {
              margin-right: 12px;
              height: 31px;
              font-size: 10px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #FFFFFF;
              line-height: 31px;
            }
          }
        }
      }
    }

    &_middlereaches {
      display: flex;
      margin-top: 10px;
      flex-direction: row;
      align-items: center;

      .type {
        width: 85px;
        height: 122px;
        text-align: center;
        margin-left: 20px;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_chain_z1.png");
        font-size: 14px;
        text-align: center;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFFFF;
        line-height: 122px;
      }

      &_listContainer {
        overflow-y: auto;
        width: 417px;
        min-height: 115px;
        max-height: 115px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 9px;
        padding-top: 6px;
        padding-bottom: 6px;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_chain_z2.png");

        &_C {
          overflow-y: auto;
          margin-left: 14px;
          width:390px;
          min-height: 109px;
          max-height: 109px;
          display: flex;
          justify-content: space-between;
          flex-direction: row;
          flex-wrap: wrap;
          margin-top: 6px;

          &_item {
            cursor: pointer;
            margin-left: 18px;
            height: 31px;
            background-size: 100% 100%;
            background-image: url("@/assets/bg_chain_z3.png");
            display: flex;
            flex-direction: row;
            align-items: center;

            .circle {
              margin-left: 12px;
              margin-right: 6px;
              width: 4px;
              height: 4px;
              background: #FF0548;
              border-radius: 50%;
            }

            .name {
              margin-right: 12px;
              height: 31px;
              font-size: 10px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #FFFFFF;
              line-height: 31px;
            }
          }
        }
      }
    }

    &_downstream {
      display: flex;
      margin-top: 10px;
      flex-direction: row;
      align-items: center;

      .type {
        width: 85px;
        height: 74px;
        text-align: center;
        margin-left: 20px;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_chain_x1.png");
        font-size: 14px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFFFF;
        line-height: 74px;
      }

      &_listContainer {
        overflow-y: hidden;
        padding-left: 14px;
        width: 405px;
        min-height: 62px;
        display: flex;
        flex-direction: row;
        margin-left: 9px;
        padding-top: 8px;
        flex-wrap: wrap;
        padding-bottom: 8px;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_chain_x2.png");

        &_item {
          cursor: pointer;
          margin-left: 18px;
          height: 31px;
          background-size: 100% 100%;
          background-image: url("@/assets/bg_chain_x3.png");
          display: flex;
          flex-direction: row;
          align-items: center;

          .circle {
            margin-left: 12px;
            margin-right: 6px;
            width: 4px;
            height: 4px;
            background: #FF0548;
            border-radius: 50%;
          }

          .name {
            margin-right: 12px;
            height: 31px;
            font-size: 10px;
            padding-right: 16px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 31px;
          }
        }
      }
    }

    &_analysis {
      margin-top: 15px;
      display: flex;
      flex-direction: column;
      margin-left: 23px;

      .titleContainer {
        width: 227px;
        height: 24px;
        display: flex;
        flex-direction: row;
        align-items: center;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_chain_d.png");

        .react {
          width: 6px;
          margin-left: 11px;
          height: 6px;
          background: #D8F0FB;
        }

        .title {
          height: 24px;
          margin-left: 6px;
          font-size: 12px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #E1F9FF;
          line-height: 24px;
        }
      }

      .scale {
        display: flex;
        margin-left: 31px;
        align-items: center;
        flex-direction: column;

        .icon {
          width: 56px;
          height: 56px;
          background-size: 100% 100%;
          margin-top: 11px;
        }

        .name {
          height: 24px;
          font-size: 11px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #00FFFF;
          line-height: 24px;
        }

        .type {
          width: 75px;
          height: 13px;
          background-size: 100% 100%;
          background-image: url("@/assets/bg_chain_g.png");
          font-size: 9px;
          text-align: center;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #E1F9FF;
          line-height: 13px;
        }
      }

      .analysisDetails {
        position: relative;
        margin-top: 12px;
        width: 227px;
        display: flex;
        flex-direction: row;
        align-items: center;

        &_React {
          width: 10px;
          height: 10px;
          margin-left: 8px;
        }

        &_name {
          margin-left: 9px;
          height: 24px;
          font-size: 10px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #E1F9FF;
          line-height: 24px;
        }

        &_des {
          position: absolute;
          right: 0px;
          max-width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          height: 24px;
          font-size: 10px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #E1F9FF;
          line-height: 24px;
        }
      }
    }
  }
}


.line {
  margin-top: 14px;
  width: 500px;
  height: 1px;
  margin-left: 27px;
  background: #00FFFF;
  border: 0px solid #E5FCFF;
  opacity: 0.66;
}
@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .marginT16 {
    margin-top: calHeight_2k(16px);
  }

  .rightView {
    margin-top: calHeight_2k(20px);
    height: calHeight_2k(630px);

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {
      height: calHeight_2k(593px);

      &_title1 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(30px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }
      }

      &_iTitle {
        height: calHeight_2k(30px);
        line-height: calHeight_2k(30px);
      }

      &_s {
      }

      &_n {
      }

      &_node {

        &_circle {
          height: calHeight_2k(4px);
        }

        &_name {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }
      }

      &_upperreaches {
        margin-top: calHeight_2k(24px);

        .type {
          height: calHeight_2k(43px);
          line-height: calHeight_2k(43px);
        }

        &_listContainer {
          max-height: calHeight_2k(47px);
          min-height: calHeight_2k(47px);

          &_C {
            margin-top: calHeight_2k(4px);
            max-height: calHeight_2k(40px);
            min-height: calHeight_2k(40px);

            &_item {
              height: calHeight_2k(31px);

              .circle {
                height: calHeight_2k(4px);
              }

              .name {
                height: calHeight_2k(31px);
                line-height: calHeight_2k(31px);
              }
            }
          }
        }
      }

      &_middlereaches {
        margin-top: calHeight_2k(10px);

        .type {
          height: calHeight_2k(122px);
          line-height: calHeight_2k(122px);
        }

        &_listContainer {
          min-height: calHeight_2k(115px);
          max-height: calHeight_2k(115px);
          padding-top: calHeight_2k(6px);
          padding-bottom: calHeight_2k(6px);

          &_C {
            min-height: calHeight_2k(109px);
            max-height: calHeight_2k(109px);
            margin-top: calHeight_2k(6px);

            &_item {
              height: calHeight_2k(31px);

              .circle {
                height: calHeight_2k(4px);
              }

              .name {
                height: calHeight_2k(31px);
                line-height: calHeight_2k(31px);
              }
            }
          }
        }
      }

      &_downstream {
        margin-top: calHeight_2k(10px);

        .type {
          height: calHeight_2k(74px);
          line-height: calHeight_2k(74px);
        }

        &_listContainer {
          min-height: calHeight_2k(62px);
          padding-top: calHeight_2k(8px);
          padding-bottom: calHeight_2k(8px);

          &_item {
            height: calHeight_2k(31px);

            .circle {
              height: calHeight_2k(4px);
            }

            .name {
              height: calHeight_2k(31px);
              line-height: calHeight_2k(31px);
            }
          }
        }
      }

      &_analysis {
        margin-top: calHeight_2k(15px);

        .titleContainer {
          height: calHeight_2k(24px);

          .react {
            height: calHeight_2k(6px);
          }

          .title {
            height: calHeight_2k(24px);
            line-height: calHeight_2k(24px);
          }
        }

        .scale {

          .icon {
            width: calHeight_2k(56px);
            height: calHeight_2k(56px);
            margin-top: calHeight_2k(11px);
          }

          .name {
            height: calHeight_2k(24px);
            line-height: calHeight_2k(24px);
          }

          .type {
            height: calHeight_2k(13px);
            line-height: calHeight_2k(13px);
          }
        }

        .analysisDetails {
          margin-top: calHeight_2k(12px);

          &_React {
            height: calHeight_2k(10px);
          }

          &_name {
            height: calHeight_2k(24px);
            line-height: calHeight_2k(24px);
          }

          &_des {
            height: calHeight_2k(24px);
            line-height: calHeight_2k(24px);
          }
        }
      }
    }
  }


  .line {
    margin-top: calHeight_2k(14px);
  }
}
</style>